<template>
  <div class="container-wrapper">
    <div class="tools-container">
      <div class="tools-header">
        <div class="tool-categories">
          <div class="category active">
            <font-awesome-icon :icon="['fas', 'table']" />
            JSON工具
          </div>
          <div class="category">
            <font-awesome-icon :icon="['fas', 'code']" />
            格式化
          </div>
          <div class="category">
            <font-awesome-icon :icon="['fas', 'play']" />
            在线运行
          </div>
          <div class="category">
            <font-awesome-icon :icon="['fas', 'toolbox']" />
            常用工具
          </div>
          <div class="category">
            <font-awesome-icon :icon="['fas', 'image']" />
            图片工具
          </div>
          <div class="category">
            <font-awesome-icon :icon="['fas', 'globe']" />
            网络工具
          </div>
          <div class="category">
            <font-awesome-icon :icon="['fas', 'text-slash']" />
            文本工具
          </div>
          <div class="category">
            <font-awesome-icon :icon="['fas', 'lock']" />
            编码加密
          </div>
          <div class="category">
            <font-awesome-icon :icon="['fas', 'apple-whole']" />
            应用广场
          </div>
        </div>
      </div>

      <div class="tools-content">
        <div class="tools-grid">
          <!-- SQL转Markdown工具 -->
          <!--          <div class="tool-card" @click="goToTool('/home/tools/sqlToDto')">-->
          <!--            <div class="tool-icon">-->
          <!--              <font-awesome-icon :icon="['fas', 'code']" />-->
          <!--            </div>-->
          <!--            <div class="tool-info">-->
          <!--              <h3>SQL转Markdown</h3>-->
          <!--              <p>SQL语句转换为Markdown格式</p>-->
          <!--            </div>-->
          <!--          </div>-->

          <!--          &lt;!&ndash; DTO转Markdown工具 &ndash;&gt;-->
          <!--          <div class="tool-card" @click="goToTool('/home/tools/toMarkdown')">-->
          <!--            <div class="tool-icon">-->
          <!--              <font-awesome-icon :icon="['fas', 'code-commit']" />-->
          <!--            </div>-->
          <!--            <div class="tool-info">-->
          <!--              <h3>DTO转Markdown</h3>-->
          <!--              <p>DTO对象转换为Markdown文档</p>-->
          <!--            </div>-->
          <!--          </div>-->

          <!-- 可以继续添加更多工具卡片 -->

          <div class="tool-card" @click="goToTool('/home/tools/comparator')">
            <div class="tool-icon">
              <font-awesome-icon :icon="['fas', 'file-excel']" />
            </div>
            <div class="tool-info">
              <h3>两列对比工具🔧</h3>
              <p>对比两个列的差异</p>
            </div>
          </div>

          <div class="tool-card" @click="goToTool('/home/tools/timeConverter')">
            <div class="tool-icon">
              <font-awesome-icon :icon="['fas', 'clock']" />
            </div>
            <div class="tool-info">
              <h3>时间戳转换工具</h3>
              <p>将时间戳转换为日期</p>
            </div>
          </div>

          <div class="tool-card" @click="goToTool('/home/tools/jsonToSql')">
            <div class="tool-icon">
              <font-awesome-icon :icon="['fas', 'server']" />
            </div>
            <div class="tool-info">
              <h3>JSON转SQL工具</h3>
              <p>将JSON数据转换为SQL语句</p>
            </div>
          </div>

          <div class="tool-card" @click="goToTool('/home/tools/fileConverter')">
            <div class="tool-icon">
              <font-awesome-icon :icon="['fas', 'database']" />
            </div>
            <div class="tool-info">
              <h3>idata文件转换工具</h3>
              <p>将错误的json数据转换为正确的json数据</p>
            </div>
          </div>

          <div class="tool-card" @click="goToTool('/home/tools/batchInsert')">
            <div class="tool-icon">
              <font-awesome-icon :icon="['fas', 'table']" />
            </div>
            <div class="tool-info">
              <h3>批量插入工具</h3>
              <p>将SQL语句批量插入到数据库中</p>
            </div>
          </div>

          <div class="tool-card" @click="goToTool('/home/tools/excelCompare')">
            <div class="tool-icon">
              <font-awesome-icon :icon="['fas', 'file-excel']" />
            </div>
            <div class="tool-info">
              <h3>Excel对比工具</h3>
              <p>对比两个Excel文件的差异</p>
            </div>
          </div>

          <div class="tool-card" @click="goToTool('/home/tools/excelBigDataCompare')">
            <div class="tool-icon">
              <font-awesome-icon :icon="['fas', 'file-excel']" />
            </div>
            <div class="tool-info">
              <h3>大Excel对比工具</h3>
              <p>对比两个Excel文件的差异</p>
              <p>文件头得保持一致</p>
            </div>
          </div>

          <div class="tool-card" @click="goToTool('/home/tools/csvGenerator')">
            <div class="tool-icon">
              <font-awesome-icon :icon="['fas', 'database']" />
            </div>
            <div class="tool-info">
              <h3>CSV造数工具</h3>
              <p>上传CSV文件，扩充数据并导出</p>
            </div>
          </div>

          <div class="tool-card" @click="goToTool('/home/tools/fileDiff')">
            <div class="tool-icon">
              <font-awesome-icon :icon="['fas', 'code-branch']" />
            </div>
            <div class="tool-info">
              <h3>文本对比工具</h3>
              <p>对比两段文本的差异，支持多种格式</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

const router = useRouter()

const goToTool = (path: string) => {
  router.push(path)
}
</script>

<style scoped lang="scss">
.container-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-color: #eef2f5;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.tools-container {
  width: 90%;
  height: 100%;
  padding: 20px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);

  .tools-header {
    background: #f9fafb;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

    .tool-categories {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      padding-bottom: 5px;

      &::-webkit-scrollbar {
        height: 4px;
      }

      &::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 2px;
      }

      .category {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 6px;
        cursor: pointer;
        white-space: nowrap;
        color: #666;
        transition: all 0.2s ease;
        border: 1px solid transparent;

        i {
          font-size: 16px;
        }

        &:hover {
          background: #f0f2f5;
          color: #42b983;
        }

        &.active {
          color: #42b983;
          font-weight: 500;
          background: rgba(66, 185, 131, 0.08);
          border-color: rgba(66, 185, 131, 0.2);
        }
      }
    }
  }

  .tools-content {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    padding: 0 10px;

    .tools-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
      padding: 10px;
      flex: 1;
      align-items: start;
      grid-auto-rows: 120px;

      @media (max-width: 1400px) {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      }

      @media (max-width: 1200px) {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      }

      @media (max-width: 992px) {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      }

      @media (max-width: 768px) {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      }

      @media (max-width: 576px) {
        grid-template-columns: 1fr;
      }

      .tool-card {
        background: #fff;
        border-radius: 10px;
        padding: 20px;
        display: flex;
        align-items: center;
        gap: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
        height: 120px;
        width: 100%;
        border: 1px solid rgba(0, 0, 0, 0.03);

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
          border-color: rgba(66, 185, 131, 0.2);
        }

        // 为每个工具卡片设置不同的淡色背景
        &:nth-child(1) {
          background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
          border-color: rgba(59, 130, 246, 0.1);
        }

        &:nth-child(2) {
          background: linear-gradient(135deg, #fef7ff 0%, #f3e8ff 100%);
          border-color: rgba(147, 51, 234, 0.1);
        }

        &:nth-child(3) {
          background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
          border-color: rgba(34, 197, 94, 0.1);
        }

        &:nth-child(4) {
          background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
          border-color: rgba(249, 115, 22, 0.1);
        }

        &:nth-child(5) {
          background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
          border-color: rgba(239, 68, 68, 0.1);
        }

        &:nth-child(6) {
          background: linear-gradient(135deg, #f0f9ff 0%, #bae6fd 100%);
          border-color: rgba(6, 182, 212, 0.1);
        }

        &:nth-child(7) {
          background: linear-gradient(135deg, #fdf4ff 0%, #f3e8ff 100%);
          border-color: rgba(168, 85, 247, 0.1);
        }

        &:nth-child(8) {
          background: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%);
          border-color: rgba(16, 185, 129, 0.1);
        }

        &:nth-child(9) {
          background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
          border-color: rgba(245, 158, 11, 0.1);
        }

        .tool-icon {
          width: 50px;
          height: 50px;
          min-width: 50px;
          background: #f5f7f8;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;

          i {
            font-size: 22px;
            color: #42b983;
          }

          svg {
            font-size: 22px;
            color: #42b983;
          }
        }

        // 为每个工具卡片的图标设置对应的颜色主题
        &:nth-child(1) .tool-icon {
          background: rgba(59, 130, 246, 0.1);

          i,
          svg {
            color: #3b82f6;
          }
        }

        &:nth-child(2) .tool-icon {
          background: rgba(147, 51, 234, 0.1);

          i,
          svg {
            color: #9333ea;
          }
        }

        &:nth-child(3) .tool-icon {
          background: rgba(34, 197, 94, 0.1);

          i,
          svg {
            color: #22c55e;
          }
        }

        &:nth-child(4) .tool-icon {
          background: rgba(249, 115, 22, 0.1);

          i,
          svg {
            color: #f97316;
          }
        }

        &:nth-child(5) .tool-icon {
          background: rgba(239, 68, 68, 0.1);

          i,
          svg {
            color: #ef4444;
          }
        }

        &:nth-child(6) .tool-icon {
          background: rgba(6, 182, 212, 0.1);

          i,
          svg {
            color: #06b6d4;
          }
        }

        &:nth-child(7) .tool-icon {
          background: rgba(168, 85, 247, 0.1);

          i,
          svg {
            color: #a855f7;
          }
        }

        &:nth-child(8) .tool-icon {
          background: rgba(16, 185, 129, 0.1);

          i,
          svg {
            color: #10b981;
          }
        }

        &:nth-child(9) .tool-icon {
          background: rgba(245, 158, 11, 0.1);

          i,
          svg {
            color: #f59e0b;
          }
        }

        .tool-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          overflow: hidden;

          h3 {
            margin: 0;
            font-size: 16px;
            color: #333;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          p {
            margin: 0;
            font-size: 14px;
            color: #666;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .tools-container {
    width: 90%;
    height: 90%;
    padding: 10px;
  }
}
</style>
